<template>
  <view class="category">
      <!-- 搜索框 -->
<Search></Search>
    <view class="main">
      <view class="menus">
        <view
          :class="['menu-item',current===index?'active':'']"
         v-for="(item,index) in menus"
         :key="item"
         @click="handCicko(index)"
        >{{item}}</view>
      </view>
      <view class="content">

        <view
          class="goods-group"
        v-for="item1 in goods"
        :key="item1.cat_id"
        >
          <view class="goods-group-title">{{item1.cat_name}}</view>
          <view class="goods-group-content">
            <navigator
            v-for="item2 in item1.children"
            :key="item2.cat_id"
            :url="'/pages/goods_list/goods_list?cid='+item2.cat_id"
            >
              <u-image
                width="120rpx"
                height="120rpx"
               :src='item2.cat_icon'
              ></u-image>
              <view class="cat-name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
data() {
  return {
    // 商品分类数据数组
    // categories:[],
    current:0,
 //左侧标题
    menus:[],
//右 商品数组
    goods:[]
  }
},
onLoad(){
  this.categories=[]
  // 异步 等待一段数据 数据才回来
  this.getcategories()
},
// computed:{
//   //左侧标题
//  menus(){
//     return this.categories.map((item)=>item.cat_name)
//  },
//  //右 商品数组
//  goods(){
//    if(!this.categories.length) return [];
//    return this.categories[this.current].children
//  }
// },
methods:{
  //发送请求获取分类数据
  async getcategories(){
    this.categories=await this.$u.http.get('/categories')
  this.menus=this.categories.map((item)=>item.cat_name)
  this.goods=this.categories[this.current].children
  },

// 左侧标题点击事件
handCicko(current){
  this.current=current
    this.goods=this.categories[this.current].children
}
}
}
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    overflow: hidden;
    display: flex;
    .menus {
      width: 182rpx;
      overflow: auto;
      .menu-item {
        text-align: center;
        height: 74rpx;
        line-height: 74rpx;
        color: #666;
      }
      /* 选中的样式 */
      .active {
        color: $themeColor;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4rpx;
          height: 70%;
          background-color: $themeColor;
        }
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .goods-group {
        .goods-group-title {
          height: 74rpx;
          text-align: center;
          line-height: 74rpx;

          &::before,
          &::after {
            content: "/";
            margin: 0 10rpx;
            color: #ccc;
          }
        }

        .goods-group-content {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;

            display: flex;
            flex-direction: column;
            // 侧轴
            align-items: center;

            .cat-name {
            }
          }
        }
      }
    }
  }
}
</style>